import { getActors } from '@/services'
import { useBoolean, useDebounceFn } from 'ahooks'
import { InfiniteScroll, List, PullToRefresh, SearchBar, Tag, Toast } from 'antd-mobile'
import { useEffect, useLayoutEffect, useState } from 'react'
import styles from './index.less'

let page = 1
export default function index({ search }: any) {
  const [hasMore, { setFalse, setTrue }] = useBoolean(true)
  const [list, setList] = useState<any>([])
  const [isLocked, setIsLocked] = useState(true)
  const loadMore = async () => {
    setIsLocked(false)
    setFalse()
    const { totalPage, currentPage, results }: any = await getActors({ activityId: '645b06638e6a340001133e0e', currentPage: page, search })
    setList((val: any) => [...val, ...results])
    if (totalPage <= currentPage) {
      setFalse()
    } else {
      setTrue()
      page = page + 1
    }
  }
  useLayoutEffect(() => {
    page = 1
  }, [])
  useEffect(() => {
    if (isLocked) return
    refresh()
  }, [search])

  const refresh = async () => {
    page = 1
    setList([])
    setTrue()
    await loadMore()
  }
  // const { run } = useDebounceFn(loadMore, { wait: 300 })
  return (
    <div className={styles.container}>
      <PullToRefresh onRefresh={refresh}>
        <div className={styles.listContainer}>
          {list.map((i: any, index: number) => {
            const {
              no,
              otherInfo: { pic, cropperFrontImg, stage, name },
            } = i
            return (
              <div className={styles.listitemWrapper} key={i._id}>
                <div className={styles.item}>
                  <div className={styles.imgcontaner}>
                    <img src={cropperFrontImg || pic} alt="" />
                    <div className={styles.bottom}>
                      <div className={styles.rank}>
                        <div className={styles.r1}>排名</div>
                        <div className={styles.r2}>{index + 1}</div>
                      </div>
                    </div>
                  </div>
                  <div className={styles.name}>
                    <Tag color="#097ed5" style={{ marginRight: 5, fontSize: 18, letterSpacing: 2, fontWeight: '900' }}>
                      <span style={{ fontSize: 15, verticalAlign: 'middle' }}>编号</span>
                      <span style={{ verticalAlign: 'middle' }}>{no}</span>
                    </Tag>
                  </div>
                  <div className={styles.name}>{name}</div>
                </div>
              </div>
            )
          })}
        </div>
      </PullToRefresh>
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
  )
}
